// 表格
import './style.less'
import { array, bool, func, number, string } from 'prop-types'
import Loading from '../loading'
import Paging from './paging'
import { useEffect, useState } from 'react'
// 根据idx判断是否选中
function Table(props){
    let {dataSource, columns, loading, tips, totalCount, pageSize, nextPage, prvePage, jumpPage, pageChange, addUnit, selectChange, showIndex,selectable} = props
    let [selectRows, setSelect] = useState([])
    let [selected, setSelected] = useState([])
    let [currentPage, setCurrentPage] = useState(1)
    let [hover, setHover] = useState(new Array(pageSize))
    useEffect(()=>{
        let sRows = selectRows.filter(val => {
            // delete val.rowKey
            return val && val
        })
        selectChange(sRows)
    // eslint-disable-next-line react-hooks/exhaustive-deps
    },[selectRows])
    useEffect(()=>{
        console.log(selected)
    },[selected])
    function select (idx, dataSource) {
        // console.log((currentPage - 1) * pageSize + idx)
        // console.log(selected)
        console.log(idx)
        if(selectable){
            if(selected.includes((currentPage - 1) * pageSize + idx)){
                // selected[(currentPage - 1) * pageSize + idx] = ''
                selected.forEach((item, index)=>{
                    if(item === (currentPage - 1) * pageSize + idx){
                        selected.splice(index,1)
                    }
                })
                setSelected([...selected])
                let sRows = selectRows.map(val=>{
                    if(val.rowKey === (currentPage - 1) * pageSize + idx){
                        return false
                    }else{
                        return val
                    }
                })
                setSelect([...sRows])
            }else{
                selected.push((currentPage - 1) * pageSize + idx)
                setSelected([...selected])
                let item = {
                    ...dataSource,
                    rowKey: (currentPage - 1) * pageSize + idx
                }
                selectRows.push(item)
                setSelect([...selectRows])
            }
        }
    }
    return <div className="table">
        <div className="table_header">
            {showIndex && <div className='table-item-number'></div>}
            {
                columns.map((column, idx) =>{
                    let { width, flex } = column
                    return <div style={{width:width, flex:flex}} key={idx} className='table-item'>{column.name}</div>
                })
            }
        </div>
        <div className='table-body'>
            <Loading visible={loading} tips={tips} type='1' opactiy={0.4}>
            {dataSource.length > 0 && dataSource.map((dataSource,idx) => idx + 1 <= pageSize?<div key={idx}>
                <div 
                    // table_row_${selected.includes((currentPage - 1) * pageSize + idx)?'active':''
                    className={`table_row animated fadeIn faster table_row_${hover[idx]} }`}
                    onClick={(e)=>{
                        select(idx, dataSource)
                    }}
                    onMouseMove={()=>{
                        // if(!selected.includes((currentPage - 1) * pageSize + idx)){
                            hover[idx] = 'hover'
                            setHover([...hover])
                        // }
                    }}
                    onMouseLeave={()=>{
                        hover[idx] = ''
                        setHover([...hover])
                    }}
                >
                    {showIndex && <>
                        <div key={idx} className='table-item-number'>  
                            {selectable && <input id={`checkbox${idx}`} checked={selected.includes((currentPage - 1) * pageSize + idx)} value={idx} name={idx} type='checkbox' onChange={(e)=>{
                                // console.log(e.target.value)
                                // console.log(e.target.checked)
                                
                            }}
                                onClick={()=>{
                                    select(idx, dataSource)
                                }}
                            />}
                            {(currentPage - 1) * pageSize + idx + 1}
                        </div>
                    </>}
                    {
                        columns.map((column, key) =>{
                            let { width, flex, align } = column
                            let style={width:width, flex:flex, alignItems:align, justifyContent:align}
                            if(column.customize){
                                return <div 
                                    onClick = {(e)=>e.stopPropagation()} 
                                    onMouseMove = {(e)=>e.stopPropagation()} 
                                    key={key} 
                                    className='table-item'
                                    style={style}
                                >{column.customize(dataSource, column)}</div>
                            }
                            if(column.type === 'column'){
                                return <div key={key} style={style} className='table-item'>{dataSource[column.key]}</div>
                            }else if(column.type === 'index'){
                                return <div key={key} style={style} className='table-item-number'>
                                    {(currentPage - 1) * pageSize + idx + 1}
                                </div>
                            }else{
                                return <div key={key} style={style} className='table-item'>{dataSource[column.key]}</div>
                            }
                        })
                    }
                </div>
            </div>:null)}
            {
                (dataSource.length === 0 && !loading) && <div className='empty'>暂无数据</div>
            }
            </Loading>
        </div>
        <Paging
            totalCount={totalCount}
            pageSize={pageSize}
            currentPage = {currentPage}
            nextPage = {nextPage}
            prvePage = {prvePage}
            jumpPage = {jumpPage}
            pageChange = {(page)=>{
                setCurrentPage(page)
                pageChange(page)
            }}
            addUnit = {addUnit}
        />
    </div>
}

Table.propTypes={
    dataSource:array,
    columns:array,
    loading:bool, 
    showIndex:bool,
    selectable:bool,
    tips:string, 
    totalCount:number, 
    addUnit:number,
    pageSize:number, 
    nextPage:func, 
    prvePage:func, 
    jumpPage:func, 
    pageChange:func,
    selectChange:func,
}
Table.defaultProps = {
    dataSource:[],
    columns:[],
    tips:'加载中', 
    totalCount:0, 
    pageSize:1, 
    addUnit:10,
    nextPage:()=>{}, 
    prvePage:()=>{}, 
    jumpPage:()=>{}, 
    pageChange:()=>{},
    selectChange:()=>{},
    showIndex:false,
    selectable:true
}

export default Table;